<template>
  <div class="common-layout">
    <el-container class="container">
      <el-aside width="200px">

        <el-menu background-color="#564430" active-text-color="#F3981C" text-color="#fff" default-active="2"
          class="el-menu-vertical-demo" :router="true">

          <el-menu-item>
            <img class="logo-image" src="../../src/assets/logo3.png" alt="">
            <span style="font-size: 20px;font-weight: bold;">才汇智云</span>
          </el-menu-item>

          <el-menu-item index="/management/Home">
            <el-icon><icon-menu /></el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <User />
              </el-icon>
              <span>人员管理</span>
            </template>

            <el-menu-item index="/management/yuangong"><el-icon>
                <Edit />
              </el-icon>员工管理</el-menu-item>
            <!-- <el-menu-item index="/management/guanliyuan">
              <el-icon>
                <Location />
              </el-icon>
              用户管理
            </el-menu-item> -->
            <el-menu-item index="/management/bumen">
              <el-icon>
                <setting />
              </el-icon>
              <span>部门管理</span>
            </el-menu-item>
            <el-menu-item index="/management/gangwei">
              <el-icon><icon-menu /></el-icon>
              <span>岗位管理</span>
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="2">
            <template #title>
   
              <el-icon><SetUp /></el-icon>
           
              <span>功能管理</span>
            </template>

            <el-menu-item index="/management/rencai">
              <el-icon><DataBoard /></el-icon>
              <span>人才招聘管理</span>
            </el-menu-item>
            <el-menu-item index="/management/xiangmu">
              <el-icon><Postcard /></el-icon>
              员工项目参与
            </el-menu-item>
            <el-menu-item index="/management/diaogang">
              <el-icon><Refresh /></el-icon>
              <span>员工调岗记录</span>
            </el-menu-item>
          </el-sub-menu>

        </el-menu></el-aside>
      <el-container>
        <el-header class="el-header" style="background-color: #fff;"><el-icon style="margin-right: 20px;">
            <Operation />
          </el-icon>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: item.path }" v-for="item in breadcrumbList" :key="item.path">{{
              item.meta.title }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </el-header>
        <el-main style="background-color: #fff;"> <router-view /></el-main>
      </el-container>
    </el-container>
  </div>
</template>




<script setup>


import {
  Menu as IconMenu,
  Setting,
  Edit,
  User,
  Operation,
  SetUp,
  DataBoard,
  Postcard,
  Refresh
} from '@element-plus/icons-vue';

</script>
<script>
export default {
  // data(){
  //   return{
  //     breadcrumbList:this.$route.matched
  //   }
  // },
  computed: {
    breadcrumbList() {
      return this.$route.matched
    }
  },
  methods: {
    created() {
      console.log(1);
    }
  }
}
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}

/* 去掉选项右侧边框 */
.el-menu {
  border-right: none;
}

/* 设置整体布局高度 */
.container {
  height: 100vh;
}

.el-menu-vertical-demo {
  height: 100%;
}

.el-header,
.el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  /* line-height: 160px; */
  padding: 0;
  margin: 0;
}

body>.el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-header {
  display: flex;
  align-items: center;
  font-size: 26px;
}

.logo {
  width: 100%;
  height: 100px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

}

.logo-image {
  width: 80px;
  height: 80px;
  margin-left: -15px;
}
</style>